<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-03-05 19:29:21
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-06 09:42:14
 * @FilePath: /XMate-h5/src/components/datePicker/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="date-picker">
    <div class="date-range-view" @click="showDateSelect">
      <span>{{ startDate || "开始日期" }}</span>
      <span class="separator">至</span>
      <span>{{ endDate || "结束日期" }}</span>
    </div>

    <dateSelectView
      v-model:show="isShowDateSelect"
      isPopup
      :defaultDate="[startDate, endDate]"
      @confirm="handleDateConfirm"
    />
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import dateSelectView from "@/components/dateSelectView.vue";

const props = defineProps({
  start: {
    type: String,
    default: ""
  },
  end: {
    type: String,
    default: ""
  }
});

const startDate = ref(props.start);
const endDate = ref(props.end);
const isShowDateSelect = ref(false);

const emit = defineEmits(["update:start", "update:end", "confirm"]);

// 监听 props 变化
watch(
  () => props.start,
  newVal => {
    startDate.value = newVal;
  }
);

watch(
  () => props.end,
  newVal => {
    endDate.value = newVal;
  }
);

const showDateSelect = () => {
  isShowDateSelect.value = true;
};

const handleDateConfirm = dates => {
  console.log("handleDateConfirm", dates);
  startDate.value = dates[0];
  endDate.value = dates[1];
  isShowDateSelect.value = false;
  emit("update:start", dates[0]);
  emit("update:end", dates[1]);
  emit("confirm", dates);
};
</script>

<style lang="less" scoped>
.date-picker {
  .date-range-view {
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;

    .separator {
      margin: 0 8px;
      color: #909399;
    }
  }
}
</style>
